import React, { Component } from 'react'
import "./works.scss"
import { Pagination } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer' 
import { get } from '../../axios/localstorage';
import { getApiGetWorkList } from '../../axios/api';

export default class works extends Component {

    state = {
        list:[
            {},{},{},{}
        ],
        page:1,
        total:1,

        showLogin:false,
        alert:false,
    }

    componentWillMount(){
        this.getList();
    }

    getList=()=>{
        let param = {
            page:this.state.page,
            type:get('type')?get('type'):0,
        }

        getApiGetWorkList(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.data,
                    total:data.total,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    changePage=(page)=>{
        this.setState({
            page
        })

        setTimeout(()=>{
            this.getList();
        },30)
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    hideLoginType=()=>{
        this.setState({
            showLogin:false
        })
    }

    render() {
        return (
            <div className='works'>
                <Header loginType={this.state.showLogin} hideLoginType={this.hideLoginType} />
                <div className='page1' style={{backgroundImage:"url('assets/img/zuopin.png')"}}>
                    <div className='pm'>
                        <div className='name'>
                            <img alt="" src="assets/img/zuopinzhanshi.png" />
                            <h2>作品展示</h2>
                            <p>优秀作品，海量观看</p>
                            <button onClick={()=>{

                                if(!get('token')){
                                    // message.info("请先登录");
                                    this.setState({alert:true})
                                    return false;
                                }
                                
                                this.gotoPage('/uploadwork')
                                }}>上传作品</button>
                        </div>
                    </div>  
                </div>
                <div className='page2'>
                    <div className='pm'>
                        <div className='box'>
                            {
                                this.state.list.map((item,index)=>{
                                    return <div className='item' onClick={()=>{this.gotoPage('/workinfo?id='+item.id)}}>
                                                <div className='ibg' style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                                <h2>{item.title}</h2>
                                                <div className='itext'>{item.introduction}</div>
                                                <div className='info'>
                                                    <div className='avatar' style={{backgroundImage:"url('"+item.avatar+"')"}}></div>
                                                    <p>{item.username}</p>
                                                    <h4>{item.fraction} 分</h4>
                                                </div>
                                            </div>
                                })
                            }
                        </div>
                        <div className="none" hidden={this.state.list.length !== 0}>
                            <div className="cen">
                                <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                            </div>
                            <p>暂无作品展示</p>
                        </div>
                        <div className='r_page'>
                            <Pagination type="primary" showSizeChanger={false} pageSize={12}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                        </div>
                    </div>
                </div>

                <div className='alert' hidden={!this.state.alert}>
                    <div className='abox'>
                        <h1>未登录</h1>
                        <p>您好，您暂未登录，</p>
                        <p>请登录您的个人账号后继续使用</p>
                        <div className='adiv'>
                            <button className='ad1' onClick={()=>{this.setState({alert:false})}}>取消</button>
                            <button className='ad2' onClick={()=>{this.setState({showLogin:true,alert:false})}}>去登录</button>
                        </div>
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
